<template>
  <view class="page page-index">
    <view class="panel-header">
      <view class="panel-header__icon">
        <image v-if="icon" :src="icon" class="img" mode="widthFix" />
        <text v-else class="at-icon at-icon-list" />
      </view>
      <view class="panel-header__title">
        {{ office }}
      </view>
    </view>
    <view class="panel-body">
      <view class="component-list">
        <view
          v-for="(item, index) in SelectedList"
          :key="index"
          class="component-list__item"
          @tap="gotoComponent(item.rec_id,index)"
        >
          <text class="name">
            {{item.title}}
          </text>
          <text class="at-icon at-icon-chevron-right" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import './index.scss'
import Taro from '@tarojs/taro'
import Mylist from "../../components/list"
export default {
  components: {Mylist},
  data () {
    return {
      icon: '',
      SelectedList:[],
      index:0,
      office:"",
    }
  },
  mounted() {
    this.index = this.$taro.Current.router.params.id
    this.SelectedList = Taro.getStorageSync("SelectedList")[this.index].dept;
    Taro.setStorageSync("SelectedListItem",this.SelectedList)
    console.log(this.SelectedList)
    this.office = Taro.getStorageSync("SelectedList")[this.index].title
  },
  computed:{
  },
  methods: {
    gotoComponent(rec_id,itemIndex) {
      console.log(rec_id)
      this.$taro.navigateTo({
        url: `/pages/DocList/DocList?rec_id=${rec_id}&index=${itemIndex}`,
      })
    },
  },
}
</script>
<style lang="less" scoped>

.page{
  background-color: #F8F8F8;
  min-height: 29rem;
}
.userInfo{
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 20px;
}
.fab{
  position: fixed;
  bottom: 50px;
  right: 50px;
}
</style>
